import React, { Component } from 'react';
import { Loading, Feedback, Search, Button, Grid } from '@icedesign/base';
import ReactList from 'react-list';
import IceContainer from '@icedesign/container';
import IceEllipsis from '@icedesign/ellipsis';
import avatar from './images/QQ20180819-021827.jpg';
import axios from 'axios';
import IceLabel from '@icedesign/label';
import IceTitle from '@icedesign/title';
import { Link } from 'react-router-dom'
import CommonUtil from '../../../../util/CommonUtil'
const { Row, Col } = Grid
export default class ScrollList extends Component {
  static displayName = 'ScrollList';

  static defaultProps = {
    height: '900px',
  };
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      total: 20,
      isLoading: false,
      pageSize: 10,
      pageNo: 0,
      current: 1,
      filter: [
        {
          text: "标题",
          value: "bName"
        },
        {
          text: "副标题",
          value: "bTitle"
        },
        {
          text: "内容",
          value: "bContent"
        },
      ],
      value: "",
    };
  }

  onSearch = (value) => {
    value.value = value.filter
    delete value.filter
    delete value.filterValue
    const v = {}
    v.key = value.value
    v.value = value.key
    console.log('vvv', v);
    this.setState({
      isLoading: true,
    });
reader
    axios.post(`http://zzuisa.cn/reader/blog/search?page=1&size=100`, v)
      .then((res) => {
        console.log("res-->", res)
        // if (res.data.code !== 0) {
        //   Feedback.toast.error(res.data.message)
        //   this.props.history.push('/login')
        // }
        if (res.data.code == 0) {
          Feedback.toast.success('欢迎回来~')
          this.setState({
            total: res.data.data.totalElements
          })
          this.setState((prevState) => {
            return {
              list: res.data.data.content, // 这里不能用list: [...prevState.list, ...res.data.data.content], 否则list 无法更新
              total: res.data.data.totalElements,
              pageNo: prevState.pageNo + 1,
              isLoading: false,
            };
          })
          console.log("list-_____->", this.state.list)

        }
      })
  }

  fetchData = () => {
    this.setState({
      isLoading: true,
    });

    const url = ` http://zzuisa.cn/reader/blog/list?page=${this.state.pageNo}`
    axios.get(url).then((res) => {
      console.log("ressss", res)
      if (res.data.code !== 0) {
        Feedback.toast.error(res.data.message),
          this.props.history.push('/login');

      }
      if (res.data.code === 0) {
        this.setState({
          total: res.data.data.totalElements,
        })
        this.setState((prevState) => {
          return {
            list: [...prevState.list, ...res.data.data.content],
            total: res.data.data.totalElements,
            pageNo: prevState.pageNo + 1,
            isLoading: false,
          };
        });
      }
    });
  };

  renderItem = (index, key) => {
    return this.state.list[index] ? (
      <div key={key} style={styles.listItem}>
        <img src={avatar} style={styles.avatar} />
        <Link className="onHover" to={`/blog/read/${this.state.list[index].id}/${this.state.total}`}>
          <div style={styles.info}>
            <IceTitle text={this.state.list[index].bname} subtitle={this.state.list[index].btitle} />
            <div
              style={{
                // background: '#999',
                color: '#666',
                height: '100px',
                textAlign: 'left',
                paddingTop: '5px',
                maxWith:'100%'
              }}
            >
              <div style={styles.infoItem}><IceLabel style={{ backgroundColor: '#e4e2fa', color: '#7265e6' }}>{this.state.list[index].author}</IceLabel>
                <IceLabel style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>{this.state.list[index].createtime}</IceLabel></div>
              <IceEllipsis showTooltip={false} lineLimit={3} text={<div dangerouslySetInnerHTML={{ __html: `${this.state.list[index].bcontent}` }} />} />
            </div>
          </div>
        </Link>
        <div style={styles.bname}></div>
        <div style={styles.title}></div>

      </div>
    ) : (
        ''
      );
  };

  handleScroll = () => {
    const lastVisibleIndex = this.refs.list.getVisibleRange()[1];
    // 提前 5条 预加载
    if (
      lastVisibleIndex >= this.state.pageNo * this.state.pageSize - 5 &&
      !this.state.isLoading
    ) {
      this.fetchData();
    }
  };
  onFilterChange(value, obj) {
    console.log(`filter is: ${value}`);
    console.log("fullData: ", obj);
  }
  componentDidMount() {
    this.fetchData();
    axios.get(" http://zzuisa.cn/reader/blog/list").then((res) => {
      console.log(res)
    })

  }

  render() {
    console.log("list-->", this.state.list)

    return (
      <Loading
        shape="fusion-reactor"
        color="#66AAFF"
        style={{ display: 'block' }}
        visible={this.state.isLoading}
      >
        <IceContainer style={styles.articleFilterCard}>
          <Row>
            <Col xs={6} s={2} m={2} l={2} xl={1}>
              <Button type="secondary" onClick={() => { this.props.history.push('/') }}> 返回</Button></Col>
            <Col xs={18} s={22} m={22} l={23} xl={23}>
              <Search
                size="large"
                onSearch={this.onSearch}
                filter={this.state.filter}
                onFilterChange={this.onFilterChange.bind(this)}
              />
            </Col>
          </Row>
        </IceContainer>
        <IceContainer
          style={{ height: this.props.height, overflow: 'auto' }}
          onScroll={this.handleScroll}
        >
          <ReactList
            ref="list"
            itemRenderer={this.renderItem}
            length={this.state.total}
            pageSize={this.state.pageSize}
          />
        </IceContainer>
      </Loading >
    );
  }
}

const styles = {
  listItem: {
    padding: 10,
    background: '#fff',
    borderBottom: '1px solid #ddd',
    minHeight: '390px'
  },
  avatar: {
    width: 50,
    height: 50,
    verticalAlign: 'middle',
  },
  info: {
    display: 'inline-block',
    verticalAlign: 'middle',
    marginLeft: 20,
    height: '200px'
  },
  infoItem: {
    marginTop: '5px',
    marginBottom: '10px',
  },
  bname: {
    fontSize: '24px',
    marginBottom: '4px',
    color: 'black',
    weight: 800
  },
  title: {
    fontSize: '18px',
    marginBottom: '4px',
    color: 'cccccc',
    weight: 500
  },
  articleSort: {
    display: 'inline-block',
  }
};
